<template>
  <div>
    <input
      ref="file"
      type="file"
      style="display: none"
      @change="handleFileUpload"
    />
    <el-button @click="getFile"> 上传ttf </el-button>
    <el-button @click="doTXT"> 下载文件 </el-button>
    <div><canvas id="canvas"></canvas></div>
    <!-- <div><canvas id="canvas11" width="80px" height="80px"></canvas></div> -->
    <div
      v-for="(o, index) in pathStrArr"
      :key="index"
      style="width: 90px; height: 120px; float: left; border: 2px solid black"
    >
      <svg
        class="glyf"
        style="margin-left:15px"
        viewBox="0 0 1024 1024"
        
      >
      <!-- style="width: 80px; height: 80px;" -->
        <g transform="scale(1, -1) translate(0, -812) scale(3) ">
          <path class="path" :d="o"></path>
        </g>
      </svg>
      <div>unicode</div>
    </div>
  </div>
</template>
<script>
import opentype from "opentype.js";
import { saveAs } from "file-saver";
export default {
  data() {
    return {
      ttfFile: "./simsunb.ttf",
      font: null,
      pathInfo: null,
      canvas: null,
      newFont: null,
      pathStrArr: [],
      d: "M82 368 l227 0 q21 0 29 21 q10 22 -6 38 l-70 74 q36 34 81 54 q46 19 94 19 q53 0 101 -22 q48 -21 83 -59 q34 -36 54 -87 q21 -51 21 -106 q0 -57 -21 -106 q-20 -52 -54 -88 q-35 -37 -83 -58 q-48 -22 -101 -22 q-59 0 -113 27 q-54 28 -89 79 q-5 4 -12 6 q-8 0 -13 -5 l-69 -74 q-4 -5 -4 -11 q0 -7 2 -12 q56 -70 135 -109 q76 -39 163 -39 q79 0 152 33 q35 16 66 38 q31 22 56 50 q53 54 84 131 q31 76 31 160 q0 82 -31 160 q-31 75 -84 131 q-25 28 -56 49 q-31 23 -66 39 q-73 33 -152 33 q-73 0 -142 -31 q-71 -29 -124 -83 l-66 69 q-7 9 -16 10 q-8 2 -18 -3 q-21 -9 -20 -30 l0 -240 q-1 -15 8 -26 q11 -10 23 -10 Z",
    };
  },
  watch: {
    font: function (newFont, oldFont) {
      // console.log("watch");
      // console.log(newFont.glyphs.glyphs[0].path);
      let pathArr = [];
      for(let i =0;i<100;i++){
        pathArr.push(newFont.glyphs.glyphs[i].path);
      }
      pathArr.push(newFont.glyphs.glyphs[3148].path);
      pathArr.push(newFont.glyphs.glyphs[7556].path);
      pathArr.push(newFont.glyphs.glyphs[7555].path);
      pathArr.push(newFont.glyphs.glyphs[7554].path);
      pathArr.push(newFont.glyphs.glyphs[7553].path);
      pathArr.push(newFont.glyphs.glyphs[7552].path);
      this.pathInfo = pathArr;
      this.newFont = newFont;
      this.draw(this.pathInfo);
    },
  },
  created() {
    // this.loadTtf()
  },
  mounted() {
    this.initCanvas();
    let a = "李".charCodeAt();
    console.log(a);
  },
  methods: {
    getFile() {
      this.$refs.file.click();
    },
    handleFileUpload(event) {
      const { currentTarget: element } = event;
      if (!element.files) {
        return;
      }
      const file = element.files[0];

      const reader = new FileReader();

      reader.onload = async () => {
        this.loadFont(reader.result);
      };
      reader.readAsArrayBuffer(file);
    },
    async loadFont(arr) {
      try {
        this.font = await opentype.parse(arr);
        console.log(this.font);
       
        // Create the bézier paths for each of the glyphs.
        // Note that the .notdef glyph is required.
        // var notdefGlyph = new opentype.Glyph({
        //     name: '.notdef',
        //     unicode: 0,
        //     advanceWidth: 650,
        //     path: new opentype.Path()
        // });

        // var aPath = new opentype.Path();
        // aPath.moveTo(100, 0);
        // aPath.lineTo(100, 700);
        // // more drawing instructions...
        // var aGlyph = new opentype.Glyph({
        //     name: 'A',
        //     unicode: 65,
        //     advanceWidth: 650,
        //     path: aPath
        // });

        // var glyphs = [notdefGlyph, aGlyph];
        // var font = new opentype.Font({
        //     familyName: 'OpenTypeSans',
        //     styleName: 'Medium',
        //     unitsPerEm: 1000,
        //     ascender: 800,
        //     descender: -200,
        //     glyphs: glyphs});
        // font.download();




        const path = this.font.getPath("李", 0, 50, 50);
        console.log("getPath", path);
        const ctx = document.getElementById("canvas").getContext("2d");
        path.draw(ctx);
      } catch (err) {
        console.log("err", err);
      }
    },
    draw(pathArrs) {
      console.log("draw");
      console.log(pathArrs);
      //   let pathArr = pathArrs[0];
      // debugger;
      for (let pathArr of pathArrs) {
        let a = [];
        for (let i = 0; i < pathArr.commands.length; i++) {
          if (pathArr.commands[i].type === "Z") {
            a.push(pathArr.commands[i].type + " ");
          } else if (pathArr.commands[i].type === "M") {
            a.push(
              pathArr.commands[i].type +
                " " +
                pathArr.commands[i].x +
                " " +
                pathArr.commands[i].y +
                " "
            );
          } else if (pathArr.commands[i].type === "L") {
            a.push(
              pathArr.commands[i].type +
                " " +
                pathArr.commands[i].x +
                " " +
                pathArr.commands[i].y +
                " "
            );
          } else if (pathArr.commands[i].type === "Q") {
            a.push(
              pathArr.commands[i].type +
                " " +
                pathArr.commands[i].x1 +
                " " +
                pathArr.commands[i].y1 +
                " " +
                pathArr.commands[i].x +
                " " +
                pathArr.commands[i].y +
                " "
            );
          } else if (pathArr.commands[i].type === "C") {
            a.push(
              pathArr.commands[i].type +
                " " +
                pathArr.commands[i].x1 +
                " " +
                pathArr.commands[i].y1 +
                " " +
                pathArr.commands[i].x2 +
                " " +
                pathArr.commands[i].y2 +
                " " +
                pathArr.commands[i].x +
                " " +
                pathArr.commands[i].y +
                " "
            );
          }
        }
        let b = a.join("");
        this.pathStrArr.push(b);
      }

      let fabricObject = new fabric.Path(this.pathStrArr[0], {
        fill: "",
        stroke: "black",
        objectCaching: true,
        // selectable: false
      });
      this.canvas.add(fabricObject);
    },
    initCanvas() {
      this.canvas = new fabric.Canvas("canvas11", {
        selectable: false,
        selection: false,
      });
    },
    // doTXT() {
    //   let fs = window.require('fs');
    //   fs.writeFile('1.txt', '我是新写入的内容', function (err) {
    //     if (err) console.error(err);
    //     console.log('数据写入的数据');
    //   });
    // },
    doTXT() {
      let obj = this.newFont.glyphs.glyphs;
      console.log(typeof obj);
      console.log(obj);

      let objToStr = JSON.stringify(obj);
      let strData = new Blob([objToStr], { type: "text/plain;charset=utf-8" });
      saveAs(strData, "测试文件下载.txt");
    },
  },
};
</script>